import React, { useState } from "react";
import style from "./index.module.css";
import Navbar from "../../compoents/Navbar";
import { useNavigate } from "react-router-dom";
import NameCard from "../../compoents/NameCard";
interface Doctor {
  id: number;
  name: string;
  title: string;
  department: string;
  hospital: string;
  currentNumber: number;
}

const Index: React.FC = () => {
  const [activeTab, setActiveTab] = useState("候诊");
  const [patientName, setPatientName] = useState("王小柯");
  const [patientId, setPatientId] = useState("2015****10");
  const [showPatientModal, setShowPatientModal] = useState(false);
  const navigate = useNavigate();

  // 患者列表数据
  const patients = [
    {
      id: 1,
      name: "王小柯",
      patientId: "2015****56",
    },
    {
      id: 2,
      name: "李玲玲",
      patientId: "1312****57",
    },
  ];

  const doctors: Doctor[] = [
    {
      id: 1,
      name: "刘医生",
      title: "主任医师",
      department: "门诊外一科",
      hospital: "四川省保健院南苑",
      currentNumber: 15,
    },
    {
      id: 2,
      name: "张医生",
      title: "主任医师",
      department: "口腔科",
      hospital: "四川省保健院南苑",
      currentNumber: 6,
    },
  ];

  const tabs = ["候诊(接诊)", "检查", "取药"];

  // 检查数据
  const examinations = [
    {
      id: 1,
      name: "CT检查",
      waitingCount: 15,
      roomName: "CT检查室",
      hospital: "四川省保健院南苑",
    },
  ];

  // 取药数据
  const medicines = [
    {
      id: 1,
      waitingCount: 15,
      windowName: "门诊西药房 2号窗口",
      hospital: "四川省保健院南苑",
    },
  ];

  // 切换患者处理函数
  const handlePatientSwitch = (patient: (typeof patients)[0]) => {
    setPatientName(patient.name);
    setPatientId(patient.patientId);
    setShowPatientModal(false);
  };

  // 渲染内容区域
  const renderContent = () => {
    switch (activeTab) {
      case "候诊":
        return (
          <div className={style.doctorList}>
            {doctors.map((doctor) => (
              <div
                key={doctor.id}
                className={style.doctorCard}
                onClick={() => navigate(`/HouDetail`)}
              >
                <div className={style.doctorInfo}>
                  <div className={style.doctorAvatar}>
                    <span className={style.avatarIcon}>👨‍⚕️</span>
                  </div>
                  <div className={style.doctorDetails}>
                    <div className={style.doctorName}>
                      <span>{doctor.name}</span>
                      <span className={style.doctorTitle}>{doctor.title}</span>
                    </div>
                    <p className={style.doctorDepartment}>
                      {doctor.department} {doctor.hospital}
                    </p>
                  </div>
                </div>

                <div className={style.queueInfo}>
                  <div className={style.currentNumberBox1}>
                    <span className={style.currentNumberLabel}>当前接诊号</span>
                    <span className={style.currentNumber}>
                      {doctor.currentNumber}
                    </span>
                  </div>

                  <div className={style.viewQueueBtn}>
                    <span>查看排队情况</span>
                    <span>›</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        );
      case "检查":
        return (
          <div className={style.doctorList}>
            {examinations.map((exam) => (
              <div key={exam.id} className={style.doctorCard}>
                <div className={style.queueInfo}>
                  <div className={style.currentNumberBox}>
                    <span className={style.currentNumberLabel}>
                      前方等待人数
                    </span>
                    <span className={style.currentNumber}>
                      {exam.waitingCount}
                    </span>
                  </div>

                  <div className={style.examRoomInfo}>
                    <div className={style.roomName}>{exam.roomName}</div>
                    <div className={style.hospitalName}>{exam.hospital}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        );
      case "取药":
        return (
          <div className={style.doctorList}>
            {medicines.map((medicine) => (
              <div key={medicine.id} className={style.doctorCard}>
                <div className={style.medicineInfo}>
                  <div className={style.waitingInfo}>
                    <div className={style.waitingLabel}>前方等待人数</div>
                    <div className={style.waitingNumber}>
                      {medicine.waitingCount}
                    </div>
                  </div>
                  <div className={style.windowInfo}>
                    <div className={style.windowName}>
                      {medicine.windowName}
                    </div>
                    <div className={style.hospitalName}>
                      {medicine.hospital}
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        );
      default:
        return null;
    }
  };

  return (
    <div className={style.container}>
      <Navbar title="候诊查询" showBack={true} onBack={() => navigate(-1)} />
      <div className={style.content}>
        <NameCard />
        <div className={style.tabs}>
          {tabs.map((tab) => (
            <button
              key={tab}
              className={`${style.tab} ${
                activeTab === tab.split("(")[0] ? style.activeTab : ""
              }`}
              onClick={() => setActiveTab(tab.split("(")[0])}
            >
              {tab}
            </button>
          ))}
        </div>
        {renderContent()}
      </div>
    </div>
  );
};

export default Index;
